<!--
帧:一段动画,就是一段时间内连续播放n个画面,每一张画面,我们管他叫做帧,一定时间内连续快速播放若干个帧,就成了人眼中所看到的动画
同样的时间内,播放帧数越多,画面看起来越流畅

关键帧:是指构成一段动画若干个帧中起到决定性作用的2~3帧
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画_基本使用</title>
  <style>
    .outer{
      width: 1000px;
      height: 100px;
      border: 1px solid black;
    }

    /*定义一个动画(定义一组关键帧)-----第一种方式*/
    @keyframes goRight {
      /*第一帧*/
      from{
        transform: translate(0);
        background-color: black;
      }
      /*最后一帧*/
      to{
        /*最后一帧的位置*/
        transform: translate(900px);
        background-color: red;
      }
    }

    /*定义一个动画(定义一组关键帧)-----第二种方式*/
    @keyframes goRight2 {
      /*第一帧*/
      0%{}

      30%{
        background-color: orange;
      }

      /*最后一帧*/
      100%{
        transform: translate(900px) rotate(360deg);
        background-color: red;
      border-radius: 50%
      }
    }
    /*动画和过渡的区别:动画不需要触发条件*/
    .inner{
      width: 100px;
      height: 100px;
      background-color: blue;
      /*定义动画的名称,应用动画到元素*/
      animation-name: goRight2;
      /*动画持续时间*/
      animation-duration: 3s;
    /*  动画延迟时间*/
      animation-delay: 5s;
    }


  </style>

</head>
<body>


<div class="outer">
  <div class="inner"></div>
</div>
</body>
</html>